<template>
  <span :class="statusClass">{{ statusText }}</span>
</template>

<script>
export default {
  props: {
    status: {
      type: String,
      default: 'undo',
      validator: function (value) {
        return ['right', 'error', 'undo'].includes(value);
      }
    }
  },
  computed: {
    statusClass() {
      return {
        right: this.status === 'right',
        error: this.status === 'error',
        undo: this.status === 'undo'
      };
    },
    statusText() {
      switch (this.status) {
        case 'right':
          return '回答正确';
        case 'error':
          return '回答错误';
        case 'undo':
        default:
          return '未完成';
      }
    }
  }
};
</script>

<style scoped>
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
</style>